<template>
	<view class="content">
		<view class="" v-if="userPermiss == 0 || userPermiss == 2">
			<view class="top">
				<view class="topSearch" :style="{'background':colorConfirm}">
					<view class="status_bar"></view>
					<view class="top_cont">
						<view class="top_lrft" @click="goSearch">
							<image class="iconSearch" src="https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/sear.png" mode=""></image>
							<view class="searchtxt">搜索商品名称</view>
						</view>
					</view>
				</view>
			</view>
			<view class="banner">
				<view class="top_banner">
					<swiper class="swiper_index" :autoplay="autoplay" :interval="interval" :duration="duration" :indicator-dots="true"
					 circular>
						<swiper-item v-for="(item,index) in indexDatas.banner" :key="index">
							<view class="swiper-item">
								<image class="swiper_pic" :src="item.pic" mode=""></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="index_notice">
					<view class="index_nav" v-for="(item,index) in indexDatas.categorys" @click="goCategorys(item)">
						<image class="index_nav_icon" :src="item.pic" mode="aspectFill"></image>
						<view class="index_nav_name ellipsis">{{item.cateName}}</view>
					</view>
				</view>
			</view>
			
			<view class="cont">
			
				<view class="index_title">
					<image class="index_hot" src="https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/homehot.png" mode=""></image>
					<view class="hot_txt">热门推荐</view>
				</view>
				<view class="product_cont">
					<view class="product_list" v-for="(item,index) in indexDatas.bastList" :key="index" @click="goGoods(item)">
						<view class="product_image">
							<image class="product_pic" :src="item.image" mode="aspectFill"></image>
						</view>
						<view class="product_name ellipsis">{{item.storeName}}</view>
						<view class="product_bot">
							<view class="product_price">
								<view class="now_price">
									<view class="sign iconfont">&#xe604;</view>
									<view class="price">{{item.price}}</view>
								</view>
								<view class="now_inter" >+{{item.integral}}
									<text class="intertxt">通宝</text>
								</view>
			
							</view>
			
							<view class="product_flex">
								<view class="old_price">
									<view class="sign iconfont old">&#xe604;{{item.otPrice}}</view>
								</view>
								<view class="product_sale">已售:{{item.sales}}</view>
			
							</view>
			
			
						</view>
					</view>
			
				</view>
			
			</view>
			
			
			
		</view>
		<view class="" v-else>
			<view class="homeTip">暂时没有权限查看</view>
		</view>
		

	</view>
</template>

<script>
	export default {
		data() {
			return {
				autoplay: true,
				interval: 2000,
				duration: 500,
				indexDatas: {},
				colorConfirm: 'transparent',
				userPermiss:'' // 角色
			}
		},
		onLoad() {
			let that = this;
			if (that.cacheHelper.isLogin()) {
				that.getIndexInfo()
			} else {
				uni.navigateTo({
					url: '../login/login',
				});
			}
			uni.$on('login', function(data) {
				that.cacheHelper.isLogin()
				that.cacheHelper.updateUserInfo()
				that.getIndexInfo()
			})
		},
		onShow() {
			this.getUserInfo();
		},
		onUnload() {
			uni.$off('login', function() {});
		},
		onPullDownRefresh() {
			console.log('refresh');
			let that = this;
			that.getIndexInfo()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 获取我的信息
			getUserInfo: function() {
				this.api.getUserInfo().then(res => {
					console.log(res)
					this.userPermiss = res.data.userPermiss;
					console.log(this.userPermiss,"this.userPermiss==")
				})
			},
			// 商品详情页
			goGoods: function(item) {
				uni.navigateTo({
					url: '../home/goodsDetail/goodsDetail?id=' + item.id,
				});
			},
			// 搜索
			goSearch: function() {
				uni.navigateTo({
					url: '../home/search/search',
				});
			},

			// 获取轮播
			getIndexInfo: function() {
				this.api.integralIndexBanner().then(res => {
					console.log(res, "======")
					this.indexDatas = res.data;
				})
			},
			// 轮播详情
			goBanner: function(item) {
				uni.navigateTo({
					url: 'bannerDetail/bannerDetail?id=' + item.id,
				});
			},
			// 获取分类
			goCategorys: function(item) {
				uni.navigateTo({
					url: 'shopRecommend/shopRecommend?cateId=' + item.id + '&shopname=' + item.cateName,
				});
			}



		},
		onPageScroll: function(e) {
			let that = this;
			let scrollTop = e.scrollTop;
			if (scrollTop > 80) {
				that.colorConfirm = '#E42221';
			} else {
				that.colorConfirm = 'transparent';
			}
		}
	}
</script>

<style lang="less">
	page {
		width: 100%;
		box-sizing: border-box;
		letter-spacing: 3rpx;
		font-family: 'PingFang SC';
		background: #F5F5F5;
	}

	.content {
		width: 100%;
		box-sizing: border-box;
	}

	.top {
		width: 100%;
		box-sizing: border-box;
		height: 300rpx;
		background: url(https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/shopIndex.png) no-repeat;
		background-size: 100%;

		.topSearch {
			width: 100%;
			box-sizing: border-box;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			padding: 20rpx;

			.top_cont {
				width: 100%;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				color: #FFFFFF;

				.top_lrft {
					width: 690rpx;
					box-sizing: border-box;
					padding: 0 30rpx;
					height: 54rpx;
					background: rgba(245, 245, 245, 0.71);
					border-radius: 48rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.iconSearch {
						width: 24rpx;
						height: 24rpx;
					}

					.searchtxt {
						width: calc(100% - 24rpx);
						box-sizing: border-box;
						padding-left: 14rpx;
					}

				}
			}
		}
	}

	.banner {
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;
		padding: 0 20rpx;
		// height: 240rpx;
		position: relative;

		.top_banner {
			width: 100%;
			height: 142rpx;
			box-sizing: border-box;
			position: relative;

			.swiper_index {
				width: 100%;
				height: 280rpx;
				box-sizing: border-box;
				position: absolute;
				left: 0;
				top: -142rpx;
				z-index: 66;

				.swiper-item {
					width: 100%;
					height: 100%;

					.swiper_pic {
						width: 100%;
						height: 100%;
						border-radius: 16rpx;
					}
				}
			}
		}

		.index_notice {
			width: 100%;
			box-sizing: border-box;
			padding: 24rpx 0;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-flow: wrap;
			font-size: 24rpx;
			color: #212121;

			.index_nav {
				width: 25%;
				box-sizing: border-box;
				text-align: center;
				margin: 20rpx 0;

				.index_nav_icon {
					width: 88rpx;
					height: 88rpx;
					margin: 0 auto;
					border-radius: 50%;
				}

				.index_nav_name {
					width: 100%;
					box-sizing: border-box;
					padding: 0rpx 15rpx 0 15rpx;
					line-height: 40rpx;
				}
			}


		}

	}

	.cont {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx 20rpx;

		.group_list {
			width: 100%;
			box-sizing: border-box;

			.list {
				width: 100%;
				box-sizing: border-box;
				background: #FFFFFF;
				margin-bottom: 26rpx;
				border-radius: 16rpx;

				.list_top {
					width: 100%;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 22rpx;
					color: #A88D63;

					// padding-right: 18rpx;
					.list_more {
						width: 100rpx;
						box-sizing: border-box;
						text-align: right;

						.icon {
							font-size: 22rpx;
							color: #707070;
							// padding-left: 10rpx;
						}
					}

					.list_title {
						// padding: 0 17rpx 0 17rpx;
						// width: calc(100% - 90rpx);
						max-width: calc(100% - 100rpx);
						box-sizing: border-box;
						padding: 0 10rpx;
						line-height: 58rpx;
						font-size: 30rpx;
						color: #704912;
						border-radius: 16rpx 0 40rpx 0;
						background: linear-gradient(to right, #EDC372, #FFF4DA);
						display: flex;
						align-items: center;
						justify-content: flex-start;

						.list_date {
							width: 220rpx;
							box-sizing: border-box;
							color: #A88D63;
						}

						.list_curr {
							color: #E42221;
						}

						.list_line {
							width: 2rpx;
							height: 22rpx;
							background: #A88D63;
							margin: 0 11rpx;
						}

						.title_name {
							width: calc(100% - 244rpx);
							box-sizing: border-box;
						}
					}
				}

				.list_goods {
					width: 100%;
					box-sizing: border-box;
					padding: 24rpx 16rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 26rpx;
					color: #212121;
					flex-flow: wrap;

					.goods {
						width: 216rpx;
						box-sizing: border-box;

						.goods_image {
							width: 216rpx;
							height: 216rpx;
							background: #F0F0F0;
							border-radius: 16rpx;

							.pic {
								width: 100%;
								height: 100%;
								vertical-align: middle;
								border-radius: 16rpx;
							}
						}

						.goods_name {
							width: 100%;
							box-sizing: border-box;
							line-height: 40rpx;
							padding: 16rpx 0;
						}

						.goods_price {
							width: 100%;
							box-sizing: border-box;
							display: flex;
							justify-content: flex-start;
							align-items: center;
							font-size: 30rpx;
							color: #E42221;

							.sign iconfont {
								font-size: 24rpx;
							}
						}

					}

					&::after {
						content: "";
						width: 216rpx;
						border: 1rpx solid transparent;
					}
				}

			}
		}

		.index_title {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-size: 36rpx;
			color: #333333;
			font-weight: 600;
			line-height: 60rpx;

			.index_hot {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
		}

		.product_cont {
			width: 100%;
			box-sizing: border-box;
			padding: 10rpx 0 80rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-flow: wrap;

			.product_list {
				width: 340rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				border-radius: 8rpx;
				margin-bottom: 20rpx;
				padding-bottom: 20rpx;

				.product_image {
					width: 100%;
					height: 340rpx;
					border-radius: 8rpx 8rpx 0 0;

					.product_pic {
						width: 100%;
						height: 100%;
						border-radius: 8rpx 8rpx 0 0;
					}
				}

				.product_name {
					width: 100%;
					box-sizing: border-box;
					padding: 16rpx;
					font-size: 28rpx;
					color: #212121;
					line-height: 40rpx;
				}

				.product_bot {
					width: 100%;
					box-sizing: border-box;
					// display: flex;
					// justify-content: space-between;
					// align-items: center;
					// line-height: 40rpx;
					padding: 0 16rpx;

					.product_flex {
						width: 100%;
						box-sizing: border-box;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding-top: 15rpx;
						line-height: 40rpx;

						.product_sale {
							font-size: 26rpx;
							color: #666666;
						}

						.old_price {
							font-size: 24rpx;
							color: #999999;
							text-decoration: line-through;
							padding-left: 10rpx;

							.old {
								font-size: 26rpx;
							}
						}

					}

					.product_price {
						width: 100%;
						box-sizing: border-box;
						display: flex;
						justify-content: flex-start;
						align-items: center;

						.now_price {
							display: flex;
							align-items: center;
							font-size: 36rpx;
							color: #E42221;

							.sign {
								font-size: 32rpx;
								color: #FFDA71;
							}
						}

						.now_inter {
							font-size: 30rpx;
							color: #E42221;

							.intertxt {
								color: #212121;
								font-size: 26rpx;
								margin-left: 5rpx;
							}
						}

					}

				}
			}
		}

	}
</style>
